{% extends "../layouts/app.html" %}

{% block title %}
  {{ user.Name }}的个人中心
{% endblock %}

{% block content %}
<div class="row">

  <div class="col-lg-3 col-md-3 hidden-sm hidden-xs user-info">
    <div class="card ">
      <img class="card-img-top" src="{{ user.Avatar }}" alt="{{ user.Name }}">
      <div class="card-body">
        <h5><strong>个人简介</strong></h5>
        <p>{{ user.Introduction }}</p>
        <hr>
        <h5><strong>注册于</strong></h5>
        <p>{{ user.CreatedAt }}</p>
        <hr>
        {% if user.LastActivedAt %}
          <h5><strong>最后活跃</strong></h5>
          <p title="{{ user.LastActivedAt }}">{{ user.LastActivedAt }}</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
    <div class="card ">
      <div class="card-body">
          <h1 class="mb-0" style="font-size:22px;">{{ user.Name }} <small>{{ user.Email }}</small></h1>
      </div>
    </div>
    <hr>

    <!-- 用户发布的内容 -->
    <div class="card ">
      <div class="card-body">
        <ul class="nav nav-tabs JS-nav-wrapper">
          <li class="nav-item">
            <a class="nav-link bg-transparent link-one" href="{% route 'users.show' user.ID %}">
              Ta 的话题
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link bg-transparent link-two" href="{% route 'users.show' user.ID %}?tab=replies">
              Ta 的回复
            </a>
          </li>
        </ul>

        <div class="JS-nav-pan-one">
          {% include './_topics.html' %}
        </div>
        <div class="JS-nav-pan-two" style="display:none">
          {% include './_replies.html' %}
        </div>

      </div>
    </div>

  </div>
</div>
{% endblock %}


{% block script %}
<script>
$(function () {
  var href = window.location.href
  var $nav_wrapper = $('.JS-nav-wrapper')
  var is_replies = href.indexOf('tab=replies') !== -1

  $nav_wrapper.find('.nav-link.link-' + (is_replies ? 'two' : 'one')).addClass('active')
  $('.JS-nav-pan-one')[is_replies ? 'hide' : 'show']()
  $('.JS-nav-pan-two')[is_replies ? 'show' : 'hide']()
})
</script>
{% endblock %}
